<script>
import { getGroupList } from '../../api/GroupAPI';
import { addGUserAPI, deleteGUserAPI } from '../../api/GroupUserAPI';

export default {
    name: "Group",
    data() {
        return {
            GroupData: [],
            name: "拼团",
            userInfo: {},
        }
    },

    created() {
        console.log("diaoy");
        this.getGroup();
    },
    methods: {
        async getGroup() {
            var res = await getGroupList();
            this.GroupData = res.data ? res.data.data.groupBuyings : [];
            // console.log(this.GroupData);

        },
        async handleEdit(index, row) {

            const { data } = await this.$axios.get('/user/auth');
            if (data.code !== 200) { // Token校验异常
                this.$router.push('/');
            } else {
                this.userInfo = data.data;
                this.userAvatar = data.data.userAvatar;
            }
            await addGUserAPI({
                guUser: this.userInfo.id,
                guGroup: row.groupId,
                guPaysta: 0
            })
            this.$message({
                message: '恭喜你，拼团成功',
                type: 'success'
            });
            await this.getGroup()

        },

    }
}


</script>
<template>
    <el-table :data="GroupData" style="width: 100%">
        <el-table-column label="发布者ID" width="80">
            <template slot-scope="scope">
                <i class="el-icon-s-custom"></i>
                <span style="margin-left: 10px">{{ scope.row.groupUser }}</span>
            </template>
        </el-table-column>

        <el-table-column label="旅游地点" width="90" style="text-align: center;">
            <template slot-scope="scope">
                <i class="el-icon-location-information"></i>
                <span style="margin-left: 10px">{{ scope.row.groupAddre }}</span>
            </template>
        </el-table-column>

        <el-table-column label="地点图像" width="100" center>
            <template slot-scope="scope">
                <img :src="scope.row.groupImg" alt="" style="width: 100px; object-fit: cover;">
            </template>
        </el-table-column>
        <el-table-column label="景点描述" width="180">
            <template slot-scope="scope">
                <i class="el-icon-chat-line-round"></i>
                <span style="margin-left: 10px">{{ scope.row.groupText }}</span>
            </template>
        </el-table-column>
        <el-table-column label="开团日期日期" width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.groupTime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="开团人数" width="90">
            <template slot-scope="scope">
                <i class="el-icon-user-solid"></i>
                <span style="margin-left: 10px">{{ scope.row.groupSum }}</span>
            </template>
        </el-table-column>
        <el-table-column label="现人数" width="80">
            <template slot-scope="scope">
                <i class="el-icon-user-solid"></i>
                <span style="margin-left: 10px">{{ scope.row.groupUsum }}</span>
            </template>
        </el-table-column>

        <el-table-column label="联系方式" width="120">
            <template slot-scope="scope">
                <i class="el-icon-phone"></i>
                <span style="margin-left: 10px">{{ scope.row.groupPhone }}</span>
            </template>
        </el-table-column>


        <el-table-column label="发布价格" width="100">
            <template slot-scope="scope">
                <span style="margin-left: 10px">￥{{ scope.row.groupPrice }}</span>
            </template>
        </el-table-column>
        <el-table-column label="天数" width="80">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.groupDay }}天</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                    v-if="scope.row.groupSum > scope.row.groupUsum">参与拼团</el-button>
                <el-button size="mini" v-else>已满员</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<style scoped lang="scss">
.container {
    width: 500px;
    margin: 0 auto;
}
</style>